<!-- 同步表单 -->

<template>
  <div>
    <EasyRow col2>
      <FormSelect label="设备类别" bind="deviceCategoryId" :dict="categoryDict" disabled />
      <FormSelect label="设备类型" bind="deviceTypeId" :dict="typeDict" disabled />
    </EasyRow>

    <EasyRow col2>
      <FormInput label="设备名称" bind="deviceName" required />
      <FormInput label="设备厂商" bind="manufacturerName" />
    </EasyRow>

    <EasyRow col2>
      <FormInput label="设备型号" bind="model" />
      <FormInput label="设备序列号" bind="deviceNo" />
    </EasyRow>

    <EasyRow col2>
      <FormInput label="IP地址" bind="ipAddress" />
      <FormInput label="设备端口" bind="defaultPort" />
    </EasyRow>

    <EasyRow col2>
      <FormInput label="用户名" bind="account" />
      <FormPassword label="密码" bind="accountPassword" />
    </EasyRow>

    <EasyRow col2>
      <FormInput label="第三方ID" bind="thirdCode" />
      <FormTree :label="`所在${CORE.MAP.REGION}`" bind="areaId, areaName" :dict="CORE.REGION.DICT" allName required />
    </EasyRow>

    <FormSelectMulti label="设备标签" bind="tagIdList" :dict="tag_selectDict" triple @change="changeTag" />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'FormSync',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixWeb(),
    CORE.mixSelect('tag', 'tag_'),
  ],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 类别键名
     */
    categoryKey: () => 'deviceCategoryId',

    /**
     * 设备类别字典
     */
    categoryDict() {
      return this.$root.iot_category_selectDict
    },

    /**
     * 设备类型字典
     */
    typeDict() {
      const { one, categoryKey, $root: { iot_type_selectDict: typeDict } } = this
      return typeDict.filter((dict) => dict[3] === one[categoryKey]) || []
    },

    /**
     * 设备标签字典
     */
    tagDict() {
      const { $root: { iot_tag_selectDict: tagDict } } = this
      return tagDict
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换标签
     */
    changeTag() {
      this.one.deviceLabelDtos = this.one.tagIdList.map((tagId) => {
        const [labelId, labelName] = this.tag_selectDict.find(([id]) => tagId === id)
        return { labelId, labelName }
      })
    },
  },
}
</script>
